<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 800px;
            margin: auto;
            position: relative;
        }

        .box .content {
            width: 100%;
            height: 350px;
            border: 1px solid #ccc;
            margin: 20px auto;
            padding: 10px;
            box-sizing: border-box;
        }

        .box .content li {
            margin: 10px 0;
            padding: 5px;
            line-height: 2;
            border-radius: 5px;
            clear: both;
        }

        .box textarea {
            height: 80px;
            display: block;
            margin: auto;
            margin-top: 20px;
            width: 100%;
        }

        .box button {
            width: 80px;
            height: 30px;
            border: 1px solid #ccc;
            float: left;
            margin-top: 10px;
        }

        .active {
            float: right;
            background-color: #fc0;
            color: #fff;
        }

        p {
            color: #ccc;
            font-size: 12px;
        } 
        .rong {
            color: red;
            font-size: 20px;
            position: absolute;
            right: 40px;
        }
        .rong2{
            font-size: 20px;
            position: absolute;
            right: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="content"></ul>
        <textarea name="" id="text" cols="30" rows="10"></textarea>
        <button id="btn">提交</button>
        <span class="rong">1</span>
        <span class="rong2">/20</span>
    </div>
    <script>
        var content = document.querySelector('.content');
        var btn = document.querySelector('#btn');
        var text = document.querySelector('#text');
        var  rong=document.querySelector('.rong');
        var  rong=document.querySelector('.rong1');
        // console.log(rong);
        // 【1】点击发送按钮的时候(给按钮btn绑定点击事件)
        btn.onclick = function () {
            if (text.value) {
                content.appendChild(render(text));
                text.value =''
            } else {
                alert('数据不能为空')
            }
        }
        text.onkeydown = function (e) {
            if (e.ctrlKey && e.shiftKey) {
                if (text.value) {
                    content.appendChild(render(text));
                    text.value = '';
                    var date=new Date();
                    return date;
                } else {
                    alert('数据不能为空')
                }
            }
        }
        function render(text) {
            //  【2】创建一个li元素
            var li = document.createElement('li');
            // 给li添加class名
            li.className = 'active';
            // 【3】获取 文本域的内容(textarea 是一个置换元素，内容只能通过value获取)
            li.innerHTML = text.value;
            return li;
        }
    </script>
</body>

</html>